<template>
  <div id="admin_jsgl">
    <div class="while">
      <h1>{{$t('lang.active_types_distribution')}}</h1>
      <el-divider></el-divider>
      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
      <div id="myChart1" :style="{width: '300px', height: '300px'}"></div>
      <div id="myChart2" :style="{width: '300px', height: '300px'}"></div>
    </div>
  </div>
</template>

<script>
  var echarts = require('echarts/lib/echarts');
  export default {
    name: "home",
        mounted(){
          this.getHeadTitle();
          this.getData();
        },
        methods: {
          //修改head顶部的信息
          getHeadTitle(){
            this.$store.state.headTitle_2 = '';
            this.$store.state.headTitle = "el-icon-s-home";
            this.$store.state.headTitle = this.$t("lang.home");
            this.$store.state.show = false;
          },
          //活动类型分布折线图
          myChartLine(x,y){
              // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(document.getElementById('myChart2'))
              // 绘制图表
              myChart.setOption({
                  title: { text: '活动类型分布折线图' },
                  tooltip: {},
                  xAxis: {
                    data: x
                  },
                  yAxis: {
                    // data: y
                  },
                  series: [{
                  	// name: '销量',
                  	type: 'line',
                  	data: y
                  }]
              });
          },
          // 活动类型分布柱形图
          myChartBar(x,y){
              // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(document.getElementById('myChart1'))
              // 绘制图表
              myChart.setOption({
                  title: { text: '活动类型分布柱形图' },
                  tooltip: {},
                  xAxis: {
                    data: x
                  },
                  yAxis: {
                    // data: y
                  },
                  series: [{
                  	// name: '销量',
                  	type: 'bar',
                  	data: y
                  }]
              });
          },
          // 活动类型分布饼图
          myChartPie(data){
              // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(document.getElementById('myChart'))
              // 绘制图表
              myChart.setOption({
                  title: { text: '活动类型分布饼图' },
                  tooltip: {},
                  series: [{
                      // name: '销量',
                      type: 'pie',
                      data: data
                  }]
              });
          },
          getData(){
            this.$axios.get(this.API+"/activity/activity/countActivityType").then((res)=>{
              // console.log(res)
              this.myChartPie(res.data.data);
              this.BarData(res.data.data);
              // console.log(this.BarData(res.data.data))
            })
          },
          BarData(data){
            var name = []; var value = [];
            for(var i=0;i<data.length;i++){
              name.push(data[i].name);
              value.push(data[i].value);
            }
            // console.log(value)
            this.myChartBar(name,value);
            this.myChartLine(name,value);
          }
        },
    }
</script>

<style>
  #admin_jsgl {
    height: 100%;
    background: #eaeff7;
  }
  .while {
    background-color: #FFFFFF;
    margin: 20px;
    border-radius: 5px;
    padding: 15px;
  }

  #admin_jsgl h1 {
    margin: 0;
    font-weight: inherit;
    color: #818181;
  }

  #admin_jsgl .el-divider {
    margin: 8px 0px;
  }
  .while:hover{
    box-shadow: -5px -5px 10px #b5b5c5;
  }
  .while p{
    color: #5e5e5e;
    font-size: 14px;
    margin-top: 3px;
  }
  .while div{
    margin: auto;
  }
</style>
